<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="公司名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="公司LOGO" prop="portrait">
          <!-- <el-upload
            :action="url"
            :limit="1"
            :on-success="handleAvatarSuccess"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileList"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload> -->
          <el-upload
            class="avatar-uploader"
             :action="url"
            :limit="1"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.portrait" :src="form.portrait" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog> -->
        </el-form-item>
        <el-form-item label="公司电话" prop="phone">
          <el-input type="number" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="公司负责人" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="公司企业号" prop="code">
          <el-input type="number" v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" prop="intro">
          <el-input type="textarea" v-model="form.intro"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary">立即创建</el-button> -->
          <el-button type="primary" @click="sumbit">保存</el-button>
          <el-button type="primary" @click="handleEditPassword"
            >修改密码</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <edit-password ref="editPassword"></edit-password>
  </div>
</template>


<script>
import { companyList, companyInfo } from "@/api/company";
import common from "@/utils/common";
import EditPassword from "./components/edit-password";

export default {
  name: "index",
  components: {
    EditPassword,
  },
  data() {
    return {
      tableData: [],
      form: {
        name: "",
        phone: "",
        address: "",
        intro: "",
        code: "",
        userName: "",
        portrait: "",
      },
      fileList: [
        {
          name: "jpg",
          url: "",
        },
      ],
      url: common.imgUpUrl,
      limit: 1,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      logo: "",
      rules: {
        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        phone: [
          { required: true, message: "请选择公司手机号", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
        ],
        code: [
          { required: true, message: "请输入公司企业号", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入公司负责人姓名", trigger: "blur" },
        ],
        portrait: [
          { required: true, message: "请上传公司LOGO", trigger: "blur" },
        ],
        intro: [{ required: true, message: "请输入公司简介", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.handleInit();
  },
  methods: {
    handleInit() {
      companyList().then((res) => {
        this.form = {
          name: res.result[0].name,
          phone: res.result[0].phone,
          address: res.result[0].address,
          intro: res.result[0].intro,
          portrait: res.result[0].portrait,
          code: res.result[0].code,
          userName: res.result[0].userName,
        };
        this.fileList[0].url = res.result[0].portrait;
        console.log(this.fileList);
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.form.portrait = res.result;
    },
    handleRemove(file) {
      console.log(file);
      this.fileList = [];
      this.form.portrait = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 更新
    sumbit() {
      var that = this;
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          var phone = /^1[3|4|5|7|8][0-9]\d{8}$/;
          if (!phone.test(this.form.phone)) {
            this.$message.warning("手机号格式错误, 请重新输入");
            return false;
          }
          console.log(this.form);
          companyInfo(this.form).then((res) => {
            console.log(res);
            if (res.result == true) {
              this.$message.success("更新成功");
              this.handleInit();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleEditPassword() {
      this.$refs["editPassword"].show();
    },
  },
};
</script>

<style scoped>
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
